<template>
  <div class="assign-role">
    <el-dialog title="分配角色" :visible="showRoleDialog" @close="btnCancel">
      <el-checkbox-group v-model="roleIds">
        <el-checkbox v-for="item in list" :key="item.id" :label="item.id">
          {{ item.name }}
        </el-checkbox>
      </el-checkbox-group>
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button type="primary" size="small" @click="btnOk">确定</el-button>
          <el-button size="small" @click="btnCancel">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
// 引入角色列表
import { getRoleList } from '@/api/setting'
// 引入获取用户当前角色的方法
import { getUserDetailById } from '@/api/user'

// 给用户分配角色方法
import { assignRoles } from '@/api/employees'
export default {
  // 组件名称
  name: 'AssignRole',
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {
    showRoleDialog: {
      type: Boolean,
      default: false
    },
    // 用户的id 用来查询当前用户的角色信息
    userId: {
      type: String,
      default: null
    }
  },
  // 组件状态值
  data () {
    return {
      // 定义角色列表数据,
      list: [],
      // 存储角色复选框被选中的按钮
      roleIds: []
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  created () {
    // 调用获取角色列表方法
    this.getRoleList()
  },
  /**
  * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
  */
  mounted () { },
  // 组件方法
  methods: {
    // 获取角色列表方法
    async getRoleList () {
      const { rows } = await getRoleList({ page: 1, pagesize: 20 })// pagesize默认值为10   但是一个公司角色管理不可能超过20个
      // console.log(rows)
      // 把返回的row赋值给list角色列表
      this.list = rows
    },
    // 获取当前用户角色的方法
    async getUserDetailById (id) {
      // 这里的id不能用  userId  要用父组件传过来的  弹层是异步的  要想提前渲染就得父组件调用这个方法 并且传值
      const { roleIds } = await getUserDetailById(id)
      // console.log(roleIds)
      this.roleIds = roleIds // 赋值本用户的角色
    },
    // 点击确定提交用户角色权限
    async btnOk () {
      await assignRoles({ id: this.userId, roleIds: this.roleIds })
      // 提示修改成功
      this.$message.success('修改成功')
      // 关闭弹层
      this.$emit('update:showRoleDialog', false)
    },
    btnCancel () {
      // 清空数组
      this.roleIds = []
      // 关闭弹层
      this.$emit('update:showRoleDialog', false)
    }
  }
}
</script>

<style scoped lang="less">
</style>
